<template>
  <div id="app">
    <div class="all">
      <div class="content">
        <div class="contLeft">
          <el-carousel
            :interval="4000"
            type="card"
            change="change()"
            arrow="hover"
            loop="loop"
            height="30rem"
          >
            <el-carousel-item v-for="item in imgItem" :key="item.index">
              <img v-if="$i18n.locale == 'zh'" :src="item.url" :alt="item.alt" :title="item.title" />
              <img v-else :src="item.urlEn" :alt="item.alt" :title="item.title" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="contright">
          <div>
            {{$t("home.fishBallsNovelIntroduction")}}
          </div>
          <div class="downEe">
            <img class="eeCode" src="../../assets/home/ee.png" alt="" />
             <a href="https://yuwan.juzimoo.com/fishball/pro/1623749464969-app-com.yhzy.fishball-fishball_beijing_104665138-release-v2.2.1-221.apk" >
            <div class="eeCodeRight">
            
              <img src="../../assets/home/slogn.png" v-if="$i18n.locale == 'zh'" alt="" />
              <img src="../../assets/home/slognEn.png" v-else alt="" />
              <div class="downloadbtn ">
                <img src="../../assets/home/andro.png"/>
                <div  class="dowBtn">
                  <div class="">{{$t("home.android")}}</div>
                  <div class="downFont">{{$t("home.download")}}</div>
                </div>
                </div>
              </div>
              </a>
            </div>
          </div>
        </div>
        <!-- <div class="peopleOther">
          <img src="../../assets/home/people.png" alt="" />
        </div> -->
      </div>
    </div>
  <!-- </div> -->
</template>

<script>
export default {
  data: function () {
    return {
      show: false,
      imgItem: [
        {
          url: require("@/assets/bn1.png"),
          urlEn: require("@/assets/bn1En.png"),
          id: 1,
          alt: this.$t('home.samplePicturesOne'),
          title: this.$t('home.samplePicturesOne'),
        },
        {
          url: require("@/assets/bn2.png"),
          urlEn: require("@/assets/bn2En.png"),
          id: 2,
          alt: this.$t('home.samplePicturesTwo'),
          title: this.$t('home.samplePicturesTwo'),
        },
        {
          url: require("@/assets/bn3.png"),
          urlEn: require("@/assets/bn3En.png"),
          id: 3,
          alt: this.$t('home.samplePicturesThree'),
          title: this.$t('home.samplePicturesThree'),
        },
      ],
      // imgItemEn: [
      //   {
      //     url: require("@/assets/bn1En.png"),
      //     id: 1,
      //     alt: this.$t('home.samplePicturesOne'),
      //     title: this.$t('home.samplePicturesOne'),
      //   },
      //   {
      //     url: require("@/assets/bn2En.png"),
      //     id: 2,
      //     alt: this.$t('home.samplePicturesTwo'),
      //     title: this.$t('home.samplePicturesTwo'),
      //   },
      //   {
      //     url: require("@/assets/bn3En.png"),
      //     id: 3,
      //     alt: this.$t('home.samplePicturesThree'),
      //     title: this.$t('home.samplePicturesThree'),
      //   },
      // ],
      hoverStatus: false,
    };
  },
  methods: {
    change() {
      this.hoverStatus = !this.hoverStatus;
    },
    pull() {
      this.show = !this.show;
    },
    transDownDom() {
      this.hoverStatus = true;
    },
    // 上拉DOM
    transUpDom() {
      this.hoverStatus = false;
    },
  },
  mounted() {
    document.querySelector(".app").style.minHeight =
      document.documentElement.clientHeight + "px";
  },
};
</script>

<style lang='scss' scoped="scoped">
.codeCentent {
  text-align: center;
  img {
    width: 145px;
  }
}
.sologin {
  margin-top: 5px;
  text-align: center;
  img {
    width: 18rem;
  }
  p {
    margin-top: 5px;
    padding-left: 10px;
    font-size: 1.5rem;
    color: #4d8efb;
    letter-spacing: 0.5rem;
    text-align: center;
  }
}
::v-deep .el-carousel__item {
  box-shadow: -2px 2px 15px 5px #c5e7e6;
}
::v-deep .el-carousel--horizontal {
  padding: 20px;
  overflow-x: visible;
}

#app {
  top: 80px;
  background-color: #000;
  position: relative;
  height: 680px;
  padding-top: 30px;
}
.foot_transiton {
  position: absolute;
  top: 0;
  right: 350px;
  z-index: 2;
  top: -380px;
  transition-duration: 3s;
  -moz-transition-duration: 3s;
  -webkit-transition-duration: 3s;
  -o-transition-duration: 3s;
  .line {
    width: 0;
    height: 190px;
    border: 1px solid #000000;
    margin: 0 auto;
  }
  .cont {
    box-sizing: border-box;
    padding: 5px;
    width: 160px;
    height: 160px;
    background: orange;
    border-radius: 0;
    img {
      width: 100%;
    }
  }
  .cont_bottom {
    border: 80px solid transparent;
    border-top: 75px solid orange;
  }
}
.foot_transiton.bindDown {
  top: 0;
}
.createCenter {
  position: absolute;
  top: -80px;
  right: 120px;
  z-index: 3;
  .tocont {
    font-size: 20px;
    font-family: Songti SC;
    font-weight: 900;
    color: #21d4cf;
    padding: 5px;
    border-bottom: 1px solid #21d4cf;
  }
}
.all {
  width: 1200px;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 1;
  position: relative;
}

// .foot {
//   box-sizing: border-box;
//   width: 100%;
//   padding-top: 40px;
//   margin-top: 100px;
//   height: 130px;
//   text-align: center;
//   //   background: url("../../assets/home/cloud.png") repeat-x;
//   background-size: 1200px 180px;
//   //   animation: animate-cloud 20s linear infinite;
//   position: absolute;
//   bottom: 0;
//   .infoBox {
//     a {
//       color: #333;
//     }
//     p {
//       font-size: 16px;
//       margin: 5px 0;
//       color: #333;
//     }
//   }
// }
.people {
  position: absolute;
  right: 120px;
  bottom: -70px;
  width: 11rem;
  img {
    width: 100%;
  }
}
.peopleOther {
  img {
    position: absolute;
    left: 1rem;
    bottom: -70px;
    width: 12rem;
    z-index: 10;
  }
}
.content {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: space-around;
  width: 1200px;
  margin: 0 auto;
  padding-top: 4.5rem;
  .contLeft {
    /* flex: 1; */
    width: 38rem;
    box-sizing: border-box;

    /* background-color: #ccc; */
    .el-carousel__item {
      /* box-shadow: 3px 4px 4px 10px #F0F0F0; */
      /* background-size: cover; */
      /* width: 210px; */
      border-radius: 20px;

      img {
        width: 100%;
      }

      .Carousel {
        border-bottom: 2px solid #f1f4f8;
      }
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
      background-size: cover;
      /* width: 300px; */
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  .downEe {
    margin-top: 20px;
    display: flex;
    .eeCode {
      width: 144px;
      height: 144px;
      margin-right: 25px;
    }
    .eeCodeRight {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      height: 100%;
      img {
        width: 180px;
      }
    }
  }
  .contright {
    width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    .downloadbtn {
      width: 104px;
      height: 36px;
      background: #000;
      line-height: 36px;
      border-radius: 8px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background-size: cover;
      display: flex;
      align-items: center;
      margin-top: 20px;
      .dowBtn{
        line-height: 15px;
        text-align: left;
      }
      .downFont{
        transform: scale(.5,.5);
        margin-left: -10px;
      }
      img {
        width: 19px;
        height: 21px;
        display: inline-block;
        margin: 0 5px;
      }
    }
  }
}
</style>
